<!--  -->
<template>
    <div class="share-register">
        <div class="register-title flex">
         <span class="mt-36">融媒优品商城</span>
         <span class="share-reward-logo"></span>
        </div>
        <div class="register-help">
          <div class="title">
            <!-- 注册参与活动赢 <span class="color-red">宝马</span> -->
            </div>
          <div class="flex justify-center mt-8">
            <span class="left-tip flex justify-center aligin-center">注册有好礼</span>
            <span class="right-tip flex justify-center aligin-center">分享得福利</span>
          </div>
          <div class="mt-12 f-14">低价+活动 优品+权威 本土+特色 文化+品牌</div>
          <!-- <span class="withdrawal"></span> -->
        </div> 
        <div class="form">
            <cube-input class="mobile" v-model="mobile" placeholder="手机号" autofocus></cube-input>
            <cube-validator ref="mobile" v-model="valid[0]" :model="mobile" :rules="rules"></cube-validator>
            <div class="vcode flex aligin-center">
                <cube-input class="vcode-input" v-model="vcode" placeholder="手机号验证码" autofocus></cube-input>
                <span
                    class="timer"
                    @click="sendVcode"
                >{{((typeof this.vcodeCount)==="string")?vcodeCount:vcodeCount+'s'}}</span>
            </div>
            <cube-validator ref="vcode" v-model="valid[1]" :model="vcode" :rules="vcodeRules"></cube-validator>
            <cube-input class="password" v-model="password" placeholder="密码"   type="password" autofocus></cube-input>
            <cube-validator ref="password" v-model="valid[2]" :model="password" :rules="vcodeRules"></cube-validator>
            <cube-input class="c_password" v-model="c_password" placeholder="再次确认密码"   type="password" autofocus></cube-input>
            <cube-validator ref="c_password" v-model="valid[3]" :model="c_password" :rules="vcodeRules"></cube-validator>
            <cube-input class="c_password" v-model="joinCode" disabled placeholder="邀请码"   autofocus></cube-input>
            <button class="z-btn color-white f-16" :class="c_click?'c-click':''" @click="submit">注册</button>
            <!-- <div class="download" @click="download">跳过注册,直接下载</div> -->
        </div>
    </div>
</template>

<script>
import { quickLogin, getMsgCode, bind_mobile,Register,shareRegister } from "../api/api";
import myMixin from "../mixin/md5"
export default {
  mixins:[myMixin],
  components: {},
  data() {
    return {
      key:"",
      iv:"",
      url:"",
      type: 1,
      mobile: "", //手机号
      vcode: "", //验证码
      password:"",
      c_password:"",
      joinCode:"邀请码: ",
      vcodeTimer: null, //验证码计时器
      vcodeCount: "获取验证码",
      valid: [undefined, undefined,undefined, undefined], //校验结果
      rules: {
        required: true,
        type: "tel"
      },
      vcodeRules: {
        required: true
      }
    };
  },
  computed: {
    c_click(){
      if(this.mobile&&this.vcode&&this.password&&this.c_password){
        return true
      }
      return false
    }
  },
  watch: {},
  methods: {
    download(){
      location.href="https://a.app.qq.com/o/simple.jsp?pkgname=com.ygp_app"
    },
    //发送验证码
    sendVcode() {
      if (!(typeof this.vcodeCount === "string")) {
        return;
      }
      const mobile = this.$refs.mobile.validate();
      Promise.all([mobile]).then(() => {
        if (this.valid[0]) {
          this.vcodeCount = 60;
          this.vcodeTimer = setInterval(() => {
            if (this.vcodeCount - 1 < 0) {
              this.vcodeCount = "获取验证码";
              clearInterval(this.vcodeTimer);
              this.vcodeTimer = null;
            } else {
              this.vcodeCount -= 1;
            }
          }, 1000);
          getMsgCode({ mobile: this.mobile }).then(({data:{result}}) => {
            this.key=result.key
            this.iv=result.iv
          });
        } else {
          const toast = this.$createToast({
            txt: "手机号有误",
            type: "error"
          });
          toast.show();
        }
      });
    },
    //提交
    submit() {
      if(!(this.key&&this.iv)){
        this.$toast("请获取验证码")
        return
      }
      const mobile = this.$refs.mobile.validate();
      const vcode = this.$refs.vcode.validate();
      const password = this.$refs.password.validate();
      const c_password = this.$refs.c_password.validate();
      Promise.all([mobile, vcode,password,c_password]).then(() => {
        if (this.valid.every(item => item)) {
          if(this.password.trim().length<6){
            this.$toast("密码长度不能小于6位")
            return
          }
          let params = {
            mobile: this.mobile,
            msgCode: this.vcode,
            device_code: 1,
            password: this.encrypt(this.password,this.key,this.iv),
            confirm_password: this.encrypt(this.c_password,this.key,this.iv),
          };
           if(parseInt(this.$route.query.pid)){
            params=Object.assign({},params,{pid:this.$route.query.pid})
          } 
          if(this.$route.query.aid){
            params = Object.assign({}, params, { aid: this.$route.query.aid });
          }
         
          // quickLogin(params).then(res => {
          //    location.href="https://a.app.qq.com/o/simple.jsp?pkgname=com.ygp_app"
          // });
           Register(params).then(res => {
            if(res.data.result.token){
              this.$store.commit("saveToken",res.data.result.token)
              location.href=this.url
            }
          });
        }
      });
    }
  },
  created() {
    shareRegister().then(({data:{result}})=>{
      this.url=result.redirect_url
    })
  },
  mounted() {
    this.joinCode+=this.$route.query.aid||this.$route.query.pid
    if(this.$store.state.isLogin){
      this.$dialog
              .alert({
                message: "您当前处于登入状态"
              })
              .then(() => {
                 this.$router.replace("/index/home")
              })
    }
  },
  updated() {}, //生命周期 - 更新之后
  destroyed() {
    clearInterval(this.vcodeTimer);
    this.vcodeTimer = null;
  } //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
@import url("../assets/style/mixin");
.share-register /deep/ .cube-input-field {
  background: #d63e3d;
  color: #fff;
  height: 100%;
  border-bottom: 1px solid #eee;
}
.share-register /deep/ .cube-validator-msg-def {
  color: #fff;
  visibility: hidden;
  display: none;
}
.share-register /deep/ .cube-input-append {
  background: #d63e3d;
  color: #fff;
}
.share-register /deep/ .cube-input_active {
  background: #d63e3d;
}
.share-register /deep/ .cube-input:after {
  border: none;
}
.share-register {
  height: 100%;
  background: #d63e3d;
  background-size: 100% 100%;
 
  .register-title{
    padding: 11px 53px 0 80px;
    font-size:22px;
    font-weight:normal;
    color:rgba(255,255,255,1);
    .share-reward-logo{
      margin-left: 22px;
      height: 77px;
      width: 72px;
      background: url("../assets/imgs/share-reward-logo.png");
      background-size: 100% 100%;
    }
  }
  .register-help{
    position: relative;
    margin-top: -20px;
    height: 221px;
    background: url("../assets/imgs/register-help.png");
    background-size: 100% 100%;
    text-align: center;
    .withdrawal{
      position: absolute;
      top: 47px;
      right: 0;
      width: 78px;
      height: 36px;
      background: url("../assets/imgs/withdrawal.png");
      background-size: 100% 100%;
    }
    .title{
      padding-top: 67px;
      font-size:27px;
      color:rgba(71,67,67,1);
      line-height:21px;
      text-align: center;
    }
    .color-red{
      color: #FF343E;
    }
    .left-tip{
      width: 137px;
      height: 28px;
      background:rgba(255,52,63,1);
      border-radius: 14px 0px 0px 14px;
      color: #fff;
      font-size: 14px;
    }
    .right-tip{
      width: 137px;
      height: 28px;
      border-radius:  0px 14px 14px 0px ;
      border:1px solid rgba(255,52,63,1);
      color: #FF343F;
      box-sizing: border-box;
      font-size: 14px;
    }
  }
  .form {
    padding: 0 48px 0;
    background: #d63e3d;
  }
  .nav {
    padding: 0 15px;
    box-sizing: border-box;
    height: 45px;
    .flex-1 {
      margin: 0 20px;
      flex: 1;
    }
    .back {
      height: 32px;
      width: 32px;
      background: url("../assets/imgs/arrow-left-white.png");
      background-size: 100% 100%;
    }
  }
  //引入公共css类
  .f-24 {
    font-size: 24px;
  }

  .line {
    margin-left: 7px;
    width: 30px;
    height: 3px;
    background: #ea373f;
  }
  .mobile {
    height: 44px;
    font-size: 14px;
  }
  .vcode {
    margin: 16px 0 0 0;
    height: 44px;
    font-size: 14px;
  }
  .password,.c_password {
    margin-top: 16px;
    height: 44px;
    font-size: 14px;
  }
  .vcode-input {
    width: 180px;
    height: 44px;
    box-shadow: none;
  }
  .timer {
    width: 64px;
    height: 23px;
    border: 1px solid rgba(238, 238, 238, 1);
    border-radius: 12px;
    line-height: 23px;
    flex: 1;
    text-align: center;
    color: #fff;
  }
  .z-btn {
    margin: 30px auto;
    width: 279px;
    height: 40px;
    background: rgba(238, 238, 238, 1);
    border-radius: 8px;
    font-size: 13px;
    color: rgba(156, 156, 156, 1);
  }
   .c-click{
    background: #3cb035;
    color: #fff;
  }
  .download{
    margin-top: 6px;
    font-size: 16px;
    color: #fff;
    text-decoration:underline;
    text-align: center;
  }
}
</style>